<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <link rel="icon" href="./source/image/icon-clock.png">
    <title>JS 30: Drum Kit</title>
</head>
<body>
    <div class="bg-blur"></div>
    <div class="clock">
        <div class="clock__face">
            <div class="clock__hour-hand hand"></div>
            <div class="clock__min-hand hand"></div>
            <div class="clock__second-hand hand"></div>
        </div>
    </div>

    <script>
        const secondHand = document.querySelector('.clock__second-hand');
        const minHand = document.querySelector('.clock__min-hand');
        const hourHand = document.querySelector('.clock__hour-hand');

        function setDate() {
            let countSeconds = 1;
            let countMins = 1;
            let countHours = 1;
            
            return function () {
                const dateTime = new Date();
                const seconds = dateTime.getSeconds();
                const mins = dateTime.getMinutes();
                const hours = dateTime.getHours();

                const secondsDeg = ((seconds / 60) * 360);
                secondHand.style.transform = `rotate(${secondsDeg + (countSeconds * 90)}deg)`;

                const minDeg = ((mins / 60) * 360) + ((seconds / 60) * 6) + 95;
                minHand.style.transform = `rotate(${minDeg * countMins}deg)`;

                const hourDeg = ((hours / 12) * 360) + ((mins / 60) * 30) + 100;
                hourHand.style.transform = `rotate(${hourDeg * countHours}deg)`;

                if (seconds >= 59) countSeconds += 4;
                if (mins >= 59) countMins += 4;
                if ((hours == 12 || hours == 23) && mins >= 59) countHours += 4;
            }
        }

        setDate()();

        setInterval(setDate(), 1000);
    </script>
</body>
</html>